import { List, Space, Avatar, Statistic, Button } from 'antd';
import { useEffect, useState } from 'react';
import React from 'react';
import './UserBlock.css';
import Wrapper from '../../assets/wrappers/Header.js';
import request from '../../utils/request';
var store = window.localStorage

const UserBlock = () => {
    let options = []
    const [likes, setLikes] = useState('0')
    const [comment, setComment] = useState('0')
    const [admin, setAdmin] = useState('用户')
    const [username, setUsername] = useState('')
    const [course1, setCourse1] = useState('-')
    const [course2, setCourse2] = useState('-')
    const [title1, setTitle1] = useState('-')
    const [title2, setTitle2] = useState('-')
    const upload = [
        {
          title: course1,
          time: title1
        },
        {
          title: course2,
          time: title2
        }
    ];

    useEffect(()=>{
        const getUserBlockData = async() => {
            var username = store.getItem("UserName")
            var data = { "username": username }
            request.post('/api/getUserBlockInfo', data).then(  // promise 的写法，第一个参数是路由地址，第二个参数是传入的 json
            res => {  // 成功的回调函数
                console.log(res)
                console.log(res.data)
                if(res.data[0]["sum(likes)"] == null)
                    res.data[0]["sum(likes)"] = '0'
                if(res.data.length===3){
                //No Articles Has been Upload
                setLikes(res.data[0]["sum(likes)"])
                setComment(res.data[1]["count(id)"])
                if(res.data[2].isAdmin == "1")
                        setAdmin("管理员")
                else    setAdmin("用户")
                }
                else if(res.data.length===4){
                setLikes(res.data[0]["sum(likes)"])
                setComment(res.data[1]["count(id)"])
                setCourse1(res.data[2]["course"]);
                setTitle1(res.data[2]["title"]);

                if(res.data[3].isAdmin == "1")
                    setAdmin("管理员")
                else    setAdmin("用户")
                }


                else if(res.data.length===5){
                setLikes(res.data[0]["sum(likes)"])
                setComment(res.data[1]["count(id)"])
                setCourse1(res.data[2]["course"]);
                setCourse2(res.data[3]["course"]);
                setTitle1(res.data[2]["title"]);
                setTitle2(res.data[3]["title"]);
                if(res.data[4].isAdmin == "1")
                    setAdmin("管理员");
                else    setAdmin("用户")
                }



            }
            ).catch(res => {  // 错误处理
                console.log(res.data)
                console.log("Failed ")
                setLikes('0')
                setComment('0')
                setCourse1('-')
                setCourse2('-')
            })
        }

        getUserBlockData()
      },[])


    // //这里显示通过/不通过的tag颜色需要通过后端的数据来判断
    // const getUserisAdmin = async() => {
    //     var data = { "username": username }
    //     request.post('/api/getUser', data).then(  // promise 的写法，第一个参数是路由地址，第二个参数是传入的 json
    //     res => {  // 成功的回调函数
    //         if(options.length==1) options.pop();
    //         else {options.push({
    //           "label": 0,
    //           "value":res.data.isAdmin
    //         })}
    //         if(res.data.isAdmin == "1")
    //            setAdmin("管理员")
    //         else    setAdmin("用户")
    //     }
    //     ).catch(res => {  // 错误处理
    //         console.log("FAILED")
    //     })
    // }

    // const getUserBlockData = async() => {
    //     var data = { "username": username }
    //     request.post('/api/getCommentTotalLikes', data).then(  // promise 的写法，第一个参数是路由地址，第二个参数是传入的 json
    //     res => {  // 成功的回调函数
    //         if(options.length==1) options.pop();
    //         else {options.push({
    //           "label": 0,
    //           "value":res.data
    //         })}
    //         setLikes(res.data[0]["sum(likes)"])
    //         setComment(res.data[1]["count(id)"])
    //         setCourse1(res.data[2]["course"]);
    //         setCourse2(res.data[3]["course"]);
    //         setTime1(res.data[2]["title"]);
    //         setTime2(res.data[3]["title"]);
    //     }
    //     ).catch(res => {  // 错误处理
    //         console.log("FAILED")
    //         setLikes('0')
    //     })
    // }

    // const getTotalComment = async() => {
    //     var data = { "username": username }
    //     request.post('/api/getUserCommentNum', data).then(  // promise 的写法，第一个参数是路由地址，第二个参数是传入的 json
    //     res => {  // 成功的回调函数
    //         if(options.length==1) options.pop();
    //         else {options.push({
    //           "label": 0,
    //           "value":res.data
    //         })}
    //         setComment(res.data[1]["count(id)"])
    //         setCourse1(res.data[2]["course"]);
    //         setCourse2(res.data[3]["course"]);
    //         setTime1(res.data[2]["title"]);
    //         setTime2(res.data[3]["title"]);
    //     }
    //     ).catch(res => {  // 错误处理
    //         console.log("FAILED")
    //         setComment('0')
    //     })
    // }
    // const getRecentArticle = async() => {
    //     var data = { "username": username }
    //     request.post('/api/getUserRecentArticles', data).then(  // promise 的写法，第一个参数是路由地址，第二个参数是传入的 json
    //     res => {  // 成功的回调函数
    //         if(options.length==1) options.pop();
    //         else {options.push({
    //           "label": 0,
    //           "value":res.data
    //         })}
    //         setCourse1(res.data[2]["course"]);
    //         setCourse2(res.data[3]["course"]);
    //         setTime1(res.data[2]["title"]);
    //         setTime2(res.data[3]["title"]);
    //     }
    //     ).catch(res => {  // 错误处理
    //         setTime1('-')
    //         setTime2('-')
    //         console.log("FAILED")
    //     })

    // }

    // useEffect(()=>{
    //     var store = window.localStorage
    //     setUsername(store.getItem("UserName"));
    //     // setUsername("haha");
    //     // getUserisAdmin();
    //     getCommentTotalLikes();
    //     // getTotalComment();
    //     // getRecentArticle();
    // })

    return (
        <Wrapper>
        <div className='container'>

            <div className='main'>
                {/* <div style = {{color:'#14919b'}} >
                    <Tag color="cyan">管理员地址</Tag>
                    <span style = {{color:'#044e54'}}>{"SSSS"}</span>
                </div> */}
                <Avatar style={{ backgroundColor: '#ffffff' }} size = {100} />
                <h4>{username}</h4>
                <div className='info'>
                    <Button type='primary' size="small" shape="round" style = {{backgroundColor :'#55acee'}}>{admin}</Button>
                </div>
                <div className="info">
                    <Space>
                        <Statistic
                            title="点赞" value={likes} precision={0}
                            valueStyle={{ color: '#3f8600' }}/>
                        <Statistic
                            title="评论" value={comment} precision={0}
                            valueStyle={{ color: '#cf1322' }}/>
                    </Space>
                </div>

                {/* <Divider orientation='center' style = {{color:'#829ab1'}} plain>最近上传</Divider> */}
                <div style={{color:'#829ab1'}}>最近上传</div>
                <List
                    itemLayout="horizontal"
                    dataSource={upload}
                    renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                        title = {<span style={{color:'#4fabec'}}>{item.title}</span>}
                        description={
                            <Space>
                            <div>{item.time}</div>
                            </Space>
                        }
                        />
                    </List.Item>
                    )}
                />
            </div>
        </div>
        </Wrapper>
    )
}


export default UserBlock
